<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="slot-example">
			<navigation-link url="https://www.baidu.com/">You Profile</navigation-link>
			
			<!-- slot 的后背内容生效 -->
			<navigation-link url="https://www.baidu.com/"></navigation-link>
			
			
			
			<!-- slot 和template 结合使用 现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 
			的 <template> 中的内容都会被视为默认插槽的内容。 -->
			<base-layout>
			  <template v-slot:header>
			    <h1>Here might be a page title</h1>
			  </template>
			
			  <p>A paragraph for the main content.</p>
			  <p>And another one.</p>
			
			  <template v-slot:footer>
			    <p>Here's some contact info</p>
			  </template>
			</base-layout>
			
			<!-- 然而，如果你希望更明确一些，仍然可以在一个 <template> 中包裹默认插槽的内容：

 -->
			<base-layout>
			  <template v-slot:header>
			    <h1>Here might be a page title</h1>
			  </template>
			
			  <template v-slot:default>
			    <p>A paragraph for the main content.</p>
			    <p>And another one.</p>
			  </template>
			
			  <template v-slot:footer>
			    <p>Here's some contact info</p>
			  </template>
			</base-layout>
			
			
			<div>
				<p>ddd</p>
				<current-user v-bind:user="user"></current-user>
			</div>
			
			
			<base-layout>
			  <template slot="header">
			    <h1>Here might be a page title</h1>
			  </template>
			
			  <p>A paragraph for the main content.</p>
			  <p>And another one.</p>
			
			  <template slot="footer">
			    <p>Here's some contact info</p>
			  </template>
			</base-layout>
			
			<base-layout>
			  <h1 slot="header">Here might be a page title</h1>
			
			  <p>A paragraph for the main content.</p>
			  <p>And another one.</p>
			
			  <p slot="footer">Here's some contact info</p>
			</base-layout>
			
			
			
		</div>	
		<!-- 
		插槽 slot
		slot的后备内容
		
		具名插槽
		有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件：


		作用域插槽
		有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：


		
		 -->
		<script type="text/javascript">
			
			
			Vue.component('current-user',{
				props:['user'],
				template:`
				<span>
					<slot>{{user.lastName}}</slot>
				</span>
				`
			})
			
			//一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

			Vue.component('base-layout',{
				props:['url'],
				template:`
				<div class="container">
				  <header>
				    <!-- 我们希望把页头放这里 -->
					<slot name="header"></slot>
				  </header>
				  <main>
				    <!-- 我们希望把主要内容放这里 -->
					    <slot></slot>

				  </main>
				  <footer>
				    <!-- 我们希望把页脚放这里 -->
					    <slot name="footer"></slot>
				  </footer>
				</div>
				`
			})
			
			let navigation_link=Vue.component('navigation-link',{
				props:['url'],
				template:`
				<a  v-bind:href="url" class="nav-link">
					<slot>我是后备内容</slot>
				</a>
				`
			})
			let app=new Vue({
				el:'#slot-example',
				data:{
					user:{
						lastName:'zhangsan',
						firstName:'zhang',
					}
				},
				
			})
		</script>	
		<style type="text/css">
		</style>
	</body>
</html>
